<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>编辑停车场信息</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<!--导入核心文件-->
		<script src="../../bootstrap3/js/holder.js" type=""></script>
		<link href="../../bootstrap3/css/bootstrap.css" rel="stylesheet" type="text/css">
		<script src="../../bootstrap3/jquery-1.9.1.min.js" type=""></script>
		<script src="../../bootstrap3/js/bootstrap.js" type=""></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" href="../../bootstrap3/font-awesome-4.7.0/css/font-awesome.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
	</head>

	<body>
		<div id="wrap">
			<div id="top_content">
					<div id="header">
						<div id="rightheader">
							<p>2019/9/25<br /></p>
						</div>
						<div id="topheader">
							<h1 id="title"><a href="#">修改停车场信息</a></h1>
						</div>
						<div id="navigation"></div>
					</div>
				<div id="content">
					<p id="whereami"></p>
					<!--<h1>add Role info:</h1>-->
					<form id="form-change-info">
						<table cellpadding="0" cellspacing="0" border="0" class="form_table">
							<tr>
								<td valign="middle" align="right">ID:</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="lotId" id="inp-lotId" readonly="readonly"/>
								</td>
								<td valign="middle" align="left" colspan="3" rowspan="5">
									<table id="table-lot-space">

									</table>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">名称:</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="name" id="inp-name" />
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">所在地：</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="location"  id="inp-location"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">计费标准：</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="price"  id="inp-price"/>
								</td>
							</tr>
							<tr>
								<td valign="middle" align="right">总车位：</td>
								<td valign="middle" align="left">
									<input type="text" class="inputgri" name="allSpace"  id="inp-allSpace" readonly="readonly"/>
								</td>
							</tr>
                            <tr>
                                <td valign="middle" align="right">剩余车位：</td>
                                <td valign="middle" align="left">
                                    <input type="text" class="inputgri" name="empty"  id="inp-empty" readonly="readonly"/>
                                </td>
                            </tr>
						</table>
						<div>
							<input type="button" class="cart-del-sel btn btn-default btn-xs" id="btn-chenge-info" onclick="updateInfo()" value="修改"/>
							<input type="button" class="cart-del-sel btn btn-default btn-xs" value="重置"onclick="document.location.reload()" />
                            <input type="button" class="cart-del-sel btn btn-default btn-xs" value="返回" onclick="goBack()"/>
							<div style="background-color: #4cae4c;height: 20px;width: 26px;float: right" align="center">on</div>
							<div style="background-color: #2aabd2;height: 20px;width: 26px;float: right" align="center">off</div>
						</div>
					</form>
				</div>
			</div>
			<div id="footer">
				<div id="footer_bg">ABC@126.com</div>
			</div>
		</div>
		<script type="text/javascript" src="../../js/jquery-getUrlParam.js"></script>
		<script type="text/javascript">

			function goBack(){
				location.href = "lotList.html";
			}

			$(document).ready(function() {
				showLotInfo();
			});

			let lotId = $.getUrlParam("lotId");

            function showLotInfo() {
                $.ajax({
                    "url":"/lot/get_lot_by/"+lotId,
                    "type":"get",
                    "dataType":"json",
                    "success":function(json) {
                        if (json.state === 2000) {
                            $("#inp-lotId").val(json.data.lotId);
                            $("#inp-name").val(json.data.name);
                            $("#inp-location").val(json.data.location);
                            $("#inp-price").val(json.data.price);
                            $("#inp-allSpace").val(json.data.allSpace);
							$("#inp-empty").val(json.data.empty);
                            getIsLocks();
                        } else {
                            alert("读取失败！" + json.message);
                        }
                    }
                });

            }

            function getIsLocks() {
                $.ajax({
                    "url": "/lot/get_Locks_by/"+lotId,
                    "type": "get",
                    "dataType": "json",
                    "success": function (json) {
                        if (json.state === 2000) {
                            showSpaceInfo(json);
                        } else {
                            alert("获取收货地址列表失败！" + json.message);
                        }
                    }
                });
            }


			function showSpaceInfo(json) {
				$("#table-lot-space").empty();
                let list = json.data;
                let count=$("#inp-allSpace").val();
                let count1=(count-count%10)/10;
                let count2=count%10;
                for (let i = 0; i < count1; i++) {
                    let html1 =
                        '<tr>' +
                        '<td><input type="button" value=#{i1} style="background-color: #{c1}" onclick="changeIs(#{s1})"></td>'+
                        '<td><input type="button" value=#{i2} style="background-color: #{c2}" onclick="changeIs(#{s2})"></td>'+
                        '<td><input type="button" value=#{i3} style="background-color: #{c3}" onclick="changeIs(#{s3})"></td>'+
                        '<td><input type="button" value=#{i4} style="background-color: #{c4}" onclick="changeIs(#{s4})"></td>'+
                        '<td><input type="button" value=#{i5} style="background-color: #{c5}" onclick="changeIs(#{s5})"></td>'+
                        '<td><input type="button" value=#{i6} style="background-color: #{c6}" onclick="changeIs(#{s6})"></td>'+
                        '<td><input type="button" value=#{i7} style="background-color: #{c7}" onclick="changeIs(#{s7})"></td>'+
                        '<td><input type="button" value=#{i8} style="background-color: #{c8}" onclick="changeIs(#{s8})"></td>'+
                        '<td><input type="button" value=#{i9} style="background-color: #{c9}" onclick="changeIs(#{s9})"></td>'+
                        '<td><input type="button" value=#{i10} style="background-color: #{c10}" onclick="changeIs(#{s10})"></td>'+
                        '</tr>';

                    html1 = html1.replace(/#{i1}/g, i+"1");
                    html1 = html1.replace(/#{i2}/g, i+"2");
                    html1 = html1.replace(/#{i3}/g, i+"3");
                    html1 = html1.replace(/#{i4}/g, i+"4");
                    html1 = html1.replace(/#{i5}/g, i+"5");
                    html1 = html1.replace(/#{i6}/g, i+"6");
                    html1 = html1.replace(/#{i7}/g, i+"7");
                    html1 = html1.replace(/#{i8}/g, i+"8");
                    html1 = html1.replace(/#{i9}/g, i+"9");
                    html1 = html1.replace(/#{i10}/g, i+1+"0");


                    html1 = html1.replace(/#{c1}/g, list[10*i+0]);
                    html1 = html1.replace(/#{c2}/g, list[10*i+1]);
                    html1 = html1.replace(/#{c3}/g, list[10*i+2]);
                    html1 = html1.replace(/#{c4}/g, list[10*i+3]);
                    html1 = html1.replace(/#{c5}/g, list[10*i+4]);
                    html1 = html1.replace(/#{c6}/g, list[10*i+5]);
                    html1 = html1.replace(/#{c7}/g, list[10*i+6]);
                    html1 = html1.replace(/#{c8}/g, list[10*i+7]);
                    html1 = html1.replace(/#{c9}/g, list[10*i+8]);
                    html1 = html1.replace(/#{c10}/g, list[10*i+9]);


					html1 = html1.replace(/#{s1}/g, 10*i+1);
					html1 = html1.replace(/#{s2}/g, 10*i+2);
					html1 = html1.replace(/#{s3}/g, 10*i+3);
					html1 = html1.replace(/#{s4}/g, 10*i+4);
					html1 = html1.replace(/#{s5}/g, 10*i+5);
					html1 = html1.replace(/#{s6}/g, 10*i+6);
					html1 = html1.replace(/#{s7}/g, 10*i+7);
					html1 = html1.replace(/#{s8}/g, 10*i+8);
					html1 = html1.replace(/#{s9}/g, 10*i+9);
					html1 = html1.replace(/#{s10}/g, 10*i+10);

                    $("#table-lot-space").append(html1);
                }
                let html2 ='<tr>';
                for (let i = 1; i < count2+1; i++) {
                    let html ='<td><input type="button" value=#{i} style="background-color:#{c}" onclick="changeIs(#{s})"></td>';
                    html = html.replace(/#{i}/g,count-count%10+i);
                    html = html.replace(/#{c}/g,list[count-count%10+i-1]);
					html = html.replace(/#{s}/g,count-count%10+i); 
                    html2+=html;
                }
                html2+='</tr>';
                $("#table-lot-space").append(html2);
			}

			function changeIs(spaceId){
				$.ajax({
					"url":"/lot/update_isLock",
					"data":"lotId="+lotId+"&spaceId="+spaceId,
					"type":"post",
					"dataType":"json",
					"success":function (json) {
						if(json.state===2000){
							alert("修改成功！");
							location.href="lotChangeInfo.html?lotId="+lotId;
						}else{
							alert("修改失败！"+json.message);
						}
					},
					"error":function () {
						alert("您的登录信息已过期！请重新登录");
						//location.href="login.html";
					}
				});
			}

			function updateInfo(){
				$.ajax({
					"url":"/lot/update_info",
					"data":$("#form-change-info").serialize(),
					"type":"post",
					"dataType":"json",
					"success":function (json) {
						if(json.state===2000){
							alert("修改角色成功！");
						}else{
							alert("修改角色失败！"+json.message);
						}
					},
					"error":function () {
						alert("您的登录信息已过期！请重新登录");
						//location.href="login.html";
					}
				});
			}

		</script>
	</body>
</html>
